window.onload = function(){
function $(id){
        return document.getElementById(id);
}
var lis=document.getElementsByClassName('box');
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(){
            btn.innerText=this.innerText;
        }
    }
var box16_picBox = document.getElementById('box16_picBox');
var pic = box16_picBox.getElementsByTagName('img');
var btns = document.getElementsByClassName('box16_smallBox_btn');
var index = 0;
function lunbo(opa){
      if(opa=='+'){
       index++;
	   	if (index==pic.length) {			
            index=0;
       }
      }else if(opa=='-'){
        index--;
	   	if (index==-1) {			
            index=pic.length-1;
       }
      }
      for(var i=0;i<pic.length;i++){
         pic[i].style.opacity =0; 
         btns[i].style.background ='#eee';          
       }
         pic[index].style.opacity =1;
         btns[index].style.background ='red';  
}
	$('nextBtn').onclick=function(){
		    lunbo('+');
	}
	$('prewBtn').onclick=function(){
		    lunbo('-');
	}
	var timer;
	timer=setInterval(function(){
		lunbo('+');
	},2000);
	$('box16_picBox').onmouseover=function(){
		clearTimeout(timer);
	}
	$('box16_picBox').onmouseout=function(){
		timer=setInterval(function(){
		lunbo('+');
	},2000);
}
for(var i=0;i<btns.length;i++){
    btns[i].index=i;
    btns[i].onclick=function(){
    	index=this.index;
    	for(var i=0;i<pic.length;i++){
         pic[i].style.opacity =0; 
         btns[i].style.background ='#eee';          
         }
         pic[index].style.opacity =1;
         btns[index].style.background ='red';
    }
}
}

